<div id="contenedor">
    <div id="myCarousel" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
          <div class="active item"><a href="evento.jsp?id=1"><img  src="publico/images/deportes.png" alt="Deportes" /></a></div>
          <div class="item"><a href="evento.jsp?id=2"><img  src="publico/images/concierto.png" alt="Conciertos" /></a></div>
          <div class="item"><a href="evento.jsp?id=4"><img  src="publico/images/teatro.png" alt="Teatro" /></a></div>
          <div class="item"><a href="evento.jsp?id=5"><img  src="publico/images/fiesta.png" alt="Fiestas" /></a></div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>
 
<script src="publico/script/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $('.carousel').carousel()
    });
</script>